<template>
  <div class="opera-wrap">
    <!-- <Button>智慧电梯</Button>
    <Button class="ml10">应急指挥</Button> -->
    <Dropdown class="opera-wrap-dropdown" transfer @on-click="handleClick">
      <a href="javascript:void(0)">
        <img class="avatar" src="../../../assets/images/theme/user-img.png" alt="" />
        {{ store.userName }}
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <template #list>
        <DropdownMenu>
          <DropdownItem name="baseInfo">基本信息</DropdownItem>
          <!-- <DropdownItem name="password">修改密码</DropdownItem>
          <DropdownItem name="theme">切换主题风格</DropdownItem>
          <DropdownItem name="version">版本信息</DropdownItem>
          <DropdownItem name="reFreshCache">清空缓存</DropdownItem>
          <DropdownItem name="menuStyle">切换菜单风格</DropdownItem>
          <DropdownItem name="roleChange">电梯检测</DropdownItem>
          <DropdownItem name="downLoadPdf">下载打印软件</DropdownItem>
          <DropdownItem name="downUseGuidePdf">使用手册</DropdownItem>
          <DropdownItem name="useGuidePdfHandel">资源（手册）下载</DropdownItem>
          <DropdownItem name="contact">客服中心</DropdownItem> -->
          <DropdownItem name="logout">退出登录</DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>
  </div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
import { userStore } from '@/stores/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = userStore()
const $Modal: any = inject('$Modal')
const onLoginout = () => {
  $Modal.confirm({
    title: '温馨提示',
    content: '你确定要退出登录吗？',
    onOk: () => {
      store.loginoutHandle().then((res: any) => {
        if (res.isSuccess) {
          window.$Message.success('已经退出系统')
          router.push({
            name: 'login'
          })
        } else {
          window.$Message.error(res.message)
        }
      })
    }
  })
}
const handleClick = (name: string) => {
  switch (name) {
    case 'baseInfo':
      break
    case 'logout':
      onLoginout()
      break
    default:
      break
  }
}
</script>

<style scoped lang="less">
.opera-wrap {
  .ml10 {
    margin-left: 10px;
  }
  &-dropdown {
    margin-left: 10px;
    .avatar {
      display: inline-block;
      vertical-align: bottom;
    }
    a {
      color: #fff;
    }
  }
}
</style>
